<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>moto 360 女式42mm 裸粉色</title>
	<link rel="stylesheet" type="text/css" href="css/jp5.css">
	<script src="scripts/jquery-3.2.1.min.js"></script>
</head>
<body>
	<a href="" class="service" title="客服"></a>
	<div class="goTop"></div>
		<!-- 头部 -->
		<div class="global-top">
			<div class="global_top_wrap">
				<div class="top_links">
					<a href="../firstpage/index.html">Moto官网</a>
					<span>|</span>
					<a href="">购买渠道</a>
					<span>|</span>
					<a href="">服务与支持</a>
					<span>|</span>
					<a href="">开发者平台</a>
					<span>|</span>
					<a href="">应用商店</a>
					<span>|</span>
					<a href="https://www.lenovo.com.cn/">联想官网</a>
				</div>
				<div class="login_box">
					<a href="">注册</a>
					<a href="" class="url_login">登录</a>
					<a href="">Z码通道</a>
				</div>
			</div>
		</div>
		<div class = 'global-header'>
			<div class = 'svgImage'>
				<svg width = '34' height = '102'>
					<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://image.motorola.com.cn/shop_v4/images/motoImages/lenovo-logo-vertical.svg" src="http://image.motorola.com.cn/shop_v4/images/motoImages/lenovo-logo-vertical.png" width="34" height="102"></image>
				</svg>
			</div>
			<div class = 'wrapper'>
				<a href="http://localhost/motorola/firstpage/index.html" class="logo" title="moto官网">
					<img src="images/logo.png">
				</a>
				 <ul class = 'nav_wrap'>
					<li>
						<a href="#" id="moto_mobile">手机</a>
						<div class="sub-shouji-nav">
							<span class="sanjiao_shouji"></span>
							<div class="shouji-sub-item">
								<ul>
									<li id="shouji-li1">
										<a href="">
											<img src="images/l1.png">
											<h4 class="title">moto z 2018 鎏金黑</h4>
											<div class="price-box">
												¥
												<span class="price">9999</span>
										  	</div>
										</a>
									</li>
									<li >
										<a href="">
											<img src="images/l2.png">
											<h4 class="title">moto 青柚 玫瑰金</h4>
											<div class="price-box">
												¥
												<span class="price">1599</span>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l3.png">
											<h4 class="title">moto 青柚 玫瑰金</h4>
											<div class="price-box">
												¥
												<span class="price">2999</span>
										  		<del>¥
										  			<span>3299</span>
										  		</del>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l4.png">
											<h4 class="title">moto z² play 电池模块套装</h4>
											<div class="price-box">
												¥
												<span class="price">2999</span>
										  		<del>¥
										  			<span>3699</span>
										  		</del>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l5.png">
											<h4 class="title">moto z标准版</h4>
											<div class="price-box">
												¥
												<span class="price">2699</span>
										  		<del>¥
										  			<span>3999</span>
										  		</del>
										  	</div>
										</a>
									</li>
								</ul>
							</div>		
						</div>
					</li>
					<li>
						<a href="#" id="moto_mods">Moto Mods</a>
						<div class="sub-motomods-nav">
							<span class="sanjiao_motomods"></span>
							<div class="motomods-sub-item">
								<ul>
									<li>
										<a href="">
											<img src="images/l11.png">
											<h4 class="title">摩景-360°全景摄影模块</h4>
											<div class="price-box">
												¥
												<span class="price">1799</span>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l22.png">
											<h4 class="title">摩电Turbo-快充电池模块</h4>
											<div class="price-box">
												¥
												<span class="price">549</span>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l33.png">
											<h4 class="title">模块优惠套装</h4>
											<div class="price-box">
												¥
												<span class="price">4946</span>
										  		<del>¥
										  			<span>5496</span>
										  		</del>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l44.png">
											<h4 class="title">摩眼-哈苏摄影模块</h4>
											<div class="price-box">
												¥
												<span class="price">2999</span>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l55.png">
											<h4 class="title">摩眼-哈苏摄影模块</h4>
											<div class="price-box">
												¥
												<span class="price">1999</span>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l66.png">
											<h4 class="title">摩眼-哈苏摄影模块</h4>
											<div class="price-box">
												¥
												<span class="price">699</span>
										  	</div>
										</a>
									</li>
								</ul>
							</div>		
						</div>
					</li>
					<li>
						<a href="#" id="moto_parts">精品配件</a>
						<div class="sub-motoparts-nav">
							<span class="sanjiao_motoparts"></span>
							<div class="motoparts-sub-item">
								<ul>
									<li>
										<a href="">
											<img src="images/l111.png">
											<h4 class="title">Motorola MX30 全数字Type-c 耳机</h4>
											<div class="price-box">
												¥
												<span class="price">2499</span>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l222.png">
											<h4 class="title">moto 360</h4>
											<div class="price-box">
												¥
												<span class="price">799起</span>
												<del>¥
										  			<span>1799</span>
										  		</del>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l333.png">
											<h4 class="title">moto 360 sport</h4>
											<div class="price-box">
												¥
												<span class="price">899</span>
										  		<del>¥
										  			<span>1999</span>
										  		</del>
										  	</div>
										</a>
									</li>
									<li>
										<a href="">
											<img src="images/l444.png">
											<h4 class="title">JBL Barepink 耳机</h4>
											<div class="price-box">
												¥
												<span class="price">99</span>
										  	</div>
										</a>
									</li>
								</ul>
							</div>		
						</div>
					</li>
					<li><a href="#">模块定制</a></li>
					<li><a href="#">Moto社区</a></li>
				</ul>
			</div>						
		</div>
		<!-- 中部 -->
		<div class="banner">
			<div class="product-detail-box">
				<div class="product-images">
					<img src="images/Barepink/jp5-11.png" class="cover">
					<ul class="bx-pager">
						<li>
							<img src="images/Barepink/jp5-11.png" alt="">
						</li>
						<li>
							<img src="images/Barepink/jp5-12.png" alt="">
						</li>
						<li>
							<img src="images/Barepink/jp5-13.png" alt="">
						</li>
						<li>
							<img src="images/Barepink/jp5-14.png" alt="">
						</li>
					</ul>
				</div>
				<div class="product-summary">
					<h3 class="pro-title">moto 360 女式42mm 裸粉色</h3>
					<p class="sale-discript" style="font-size: 12px"><font color="red">官方指导价1799元，现价799元！</font>
						<br>
					新一代 Moto 360 智能手表 功能强大 倾心之选
					</p>
					<ul class="sale-parameter">
						<li id="">
							<span class="sale-t">价<i class="sale-t-space"></i>格：
							</span>
							<div class="sale-price">
								<span>￥799.00</span>
							</div>
						</li>
						<li id="discountSale" style="display: none;">
							<span class="sale-t">限时惠：
							</span>
						</li>
						<li id=""></li>
						<li id=""></li>
						<li id=""></li>
						<li id="supportService">
							<span class="sale-t">支<i class="sale-t-space"></i>持：
							</span>
							<div class="support-service">
								<span><img src="images/hb-icon.png" > 花呗分期</span>
								<span><img src="images/sf-icon.png"> 顺丰配送</span>
								<span><img src="images/seven-icon.png"> 7天无理由退货</span>
							</div>
						</li>
					</ul>
					<div class="pro-parameter">
						<h3 class="title1">颜色</h3>
						<ul class="color-select">
							<li>	
								<span class = "sel-ico"></span>裸粉色		
							</li>
						</ul>
						<h3 class="title1">款式</h3>
						<ul class="style-select">
							<li>	
								<span class = "sel-ico"></span>女式		
							</li>
						</ul>
						<h3 class="title1">尺寸</h3>
						<ul class="size-select">
							<li>	
								<span class = "sel-ico"></span>42mm		
							</li>
						</ul>
						<h3 class="title1">选择数量</h3>
						<div class="numbers-select">
							<input class="numbers" value="1"></input>
							<span class="minusnum">-</span>
							<span class="addnum">+</span>
						</div>
						<div class="add-cart">
							<a class="add-cart-btn">
								加入购物车
							</a>
						</div>
					</div>
				</div>
			</div>

				<div class="parameter-header1">
					<span class="product-detail1">商品详情</span>
					<a class="add-cart-btn" id="add-cart-btn">加入购物车</a>
				</div>
			<div class="product-parameter-box">
				<div class="parameter-header">
					<span class="product-detail">商品详情</span>				
				</div>
				<div class="parameters-box" style="display: block;">
					<img src="images/Barepink/jp5-1.jpg" id="para-imgs1">
					<img src="images/Barepink/jp5-2.jpg" id="para-imgs2">
					<img src="images/Barepink/jp5-3.jpg" id="para-imgs3">
					<img src="images/Barepink/jp5-4.jpg" id="para-imgs4">
					<img src="images/Barepink/jp5-5.jpg" id="para-imgs5">
					<img src="images/Barepink/jp5-6.jpg" id="para-imgs6">
					<img src="images/Barepink/jp5-7.jpg" id="para-imgs7">
					<img src="images/Barepink/jp5-8.jpg" id="para-imgs8">
					<img src="images/Barepink/jp5-9.jpg" id="para-imgs9">
					<img src="images/Barepink/jp5-10.jpg" id="para-imgs10">
					<img src="images/Barepink/jp5-11.jpg" id="para-imgs11">
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="footer">
			<div class="promise-box">
				<ul>
					<li class="promise-box1">
						<a href="">
							<span class="proic1"></span>
							<strong>满98元免运费</strong>
						</a>
					</li>
					<li class="promise-box2">
						<a href="">
							<span class="proic2"></span>
							<strong>7天无理由退货</strong>
						</a>
					</li>
					<li class="promise-box3">
						<a href="">
							<span class="proic3"></span>
							<strong>15天免费换货</strong>
						</a>
					</li>
					<li class="promise-box4">
						<a href="">
							<span class="proic4"></span>
							<strong>700余家售后网点</strong>
						</a>
					</li>
				</ul>
			</div>
			<div class="footer_up">	
				<div class="col-wrapper">
					<div class="footer_logo">
						<img src="images/logo.png">
					</div>
					<dl class="col-links1">
						<dt>关于我们</dt>
							<dd><a href="#">发展经历</a></dd>
					</dl>
					<dl class="col-links2">
						<dt>媒体中心</dt>
							<dd><a href="#">官方视频</a></dd>
							<dd><a href="#">媒体报告</a></dd>
							<dd><a href="#">产品美图</a></dd>
					</dl>
					<dl class="col-links3">
						<dt>购买渠道</dt>
							<dd><a href="#">体验中心</a></dd>
							<dd><a href="#">线上销售平台</a></dd>
							<dd><a href="#">线下零售店</a></dd>
					</dl>
					<dl class="col-links4">
						<dt>服务与支持</dt>
							<dd><a href="#">售后政策</a></dd>
							<dd><a href="#">购买指南</a></dd>
							<dd><a href="#">销售网点</a></dd>
					</dl>
					<dl class="col-links5">
						<dt>关注我们</dt>
							<dd><a href="#">官方微博</a></dd>
							<dd><a href="#">官方微信</a></dd>
							<dd><a href="#">官方社区</a></dd>
					</dl>
				</div>
			</div>
			<div class="footer_down">
				<div class="infor">
					<div class="infor-left">
						<div class="language">
							<p class="country-ico"></p>
							<p class="country-change">中文&nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;<a href="">更改</a></p>
						</div>
						<p class="shuoming">
								所有手机均由 Motorola Mobility LLC 设计及生产，Motorola Mobility LLC 是 Lenovo 的全资子公司。<br><br><br>Copyright © 2017 Motorola Mobility LLC. 版权所有，本公司保留所有权利  ICP备案证书号：京ICP备09071891号-6  摩托罗拉移动技术（中国）有限公司北京分公司
						</p>
					</div>
					<div class="infor-right">
						<div class="col-contact">
							<p>400-889-9090</p>
							<span>周一至周日 9:00-21:00</span>
						</div>
						<a href=""><span class="kefu"></span></a>
					</div>
				</div>
			</div>
		</div>
</body>
</html>

<script type="text/javascript">	
	//1 导航---手机栏弹出事件
	 $('.nav_wrap').children().eq(0).mouseenter(function(){

	 	$('.sub-shouji-nav').slideDown("fast")
	 	$('.nav_wrap').children().eq(0).mouseleave(function(){
	 		$('.sub-shouji-nav').slideUp("normal")
		 })
	 })
	//2 导航---Moto-Mods栏弹出事件
	 $('.nav_wrap').children().eq(1).mouseenter(function(){

	 	$('.sub-motomods-nav').slideDown("fast")
	 	$('.nav_wrap').children().eq(1).mouseleave(function(){
	 		$('.sub-motomods-nav').slideUp("normal")
		 })
	 })
	//3 导航---精品配件栏弹出事件
	 $('.nav_wrap').children().eq(2).mouseenter(function(){
	 	
	 	$('.sub-motoparts-nav').slideDown("fast")
	 	$('.nav_wrap').children().eq(2).mouseleave(function(){

	 		$('.sub-motoparts-nav').slideUp("normal")
		 })
	 })
	//4 产品照片bx-pager的鼠标经过照片放大展示事件
	 	$(".bx-pager").children().eq(0).mouseenter(function(){
	 		$(".product-images").children().eq(0).attr("src","images/Barepink/jp5-11.png")
	 	})

	 	$(".bx-pager").children().eq(1).mouseenter(function(){
	 		$(".product-images").children().eq(0).attr("src","images/Barepink/jp5-12.png")
	 	})

	 	$(".bx-pager").children().eq(2).mouseenter(function(){
	 		$(".product-images").children().eq(0).attr("src","images/Barepink/jp5-13.png")
	 	})

	 	$(".bx-pager").children().eq(3).mouseenter(function(){
	 		$(".product-images").children().eq(0).attr("src","images/Barepink/jp5-14.png")
	 	})
	//5 回到顶部图标的相关事件以及parameter-header1的显示事件
	 	window.onscroll = function () {//按钮的隐藏和显示事件
		 	var st = document.documentElement.scrollTop
		 	if (st>600) {// 回到顶部图标显示事件
		 		$(".goTop").css("display","block")
		 	}else{// 回到顶部图标消失事件
		 		$(".goTop").css("display","none")
		 	}
		 	if (st>1000){// parameter-header1的显示事件
		 		$(".parameter-header1").css("display","block")
		 	}else{
		 		$(".parameter-header1").css("display","none")
		 	}
		}
		$(".goTop").click(function(){//回到顶部按钮按钮点击事件
			document.documentElement.scrollTop = 0
		})
	//7 pro-parameter中商品颜色模块点击事件pro-parameter
		var colorSelect = $(".color-select").children()
		$(".color-select").children().eq(0).css("border","1px solid #10bad1");
		$(".color-select").children().eq(0).children().eq(0).css("display","block")
		var styleSelect = $(".style-select").children()
		$(".style-select").children().eq(0).css("border","1px solid #10bad1");
		$(".style-select").children().eq(0).children().eq(0).css("display","block")
		var sizeSelect = $(".size-select").children()
		$(".size-select").children().eq(0).css("border","1px solid #10bad1");
		$(".size-select").children().eq(0).children().eq(0).css("display","block")

	//8 pro-parameter中商品数量模块点击事件
		$(".addnum").click(function(){// “+”点击事件
			var s = $(".numbers").attr("value")
			var num = parseInt(s)
			num += 1
			$(".numbers").attr("value",num)
		})
		$(".minusnum").click(function(){// “-”点击事件
			var s = $(".numbers").attr("value")
			var num = parseInt(s)
			num -= 1
			if (num>=1) {
				$(".numbers").attr("value",num)
			}
		})
	//9 商品详情跳转

		$(".product-detail,.product-detail1").click(function(){
			document.documentElement.scrollTop = 1001
			$(".product-detail1").css("color","#10bad1")
			$(".product-detail").css("color","#10bad1")
		})

</script>